import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../l10n/app_localizations.dart';

class RenewalInstructions extends StatelessWidget {
  const RenewalInstructions({super.key});

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context);

    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: const Color(0xFF1A1F3A).withOpacity(0.8),
        borderRadius: BorderRadius.circular(12.r),
        border: Border.all(
          color: const Color(0xFF00FFFF).withOpacity(0.3),
          width: 1,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            l10n.renewalInstructions,
            style: TextStyle(
              color: const Color(0xFF00FFFF),
              fontSize: 16.sp,
              fontWeight: FontWeight.bold,
            ),
          ),

          SizedBox(height: 16.h),

          _buildInstructionItem('1', l10n.paymentPolicy),
          SizedBox(height: 12.h),
          _buildInstructionItem('2', l10n.renewalPolicy),
          SizedBox(height: 12.h),
          _buildInstructionItem('3', l10n.cancellationPolicy),

          SizedBox(height: 16.h),

          Row(
            children: [
              _buildLink(l10n.userAgreement),
              SizedBox(width: 8.w),
              Text(
                'and',
                style: TextStyle(color: Colors.white70, fontSize: 12.sp),
              ),
              SizedBox(width: 8.w),
              _buildLink(l10n.privacyPolicy),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildInstructionItem(String number, String text) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 20.w,
          height: 20.w,
          decoration: BoxDecoration(
            color: const Color(0xFF00FFFF),
            borderRadius: BorderRadius.circular(10.r),
          ),
          child: Center(
            child: Text(
              number,
              style: TextStyle(
                color: Colors.black,
                fontSize: 12.sp,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        SizedBox(width: 12.w),
        Expanded(
          child: Text(
            text,
            style: TextStyle(
              color: Colors.white70,
              fontSize: 12.sp,
              height: 1.4,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildLink(String text) {
    return GestureDetector(
      onTap: () {
        // 处理链接点击
      },
      child: Text(
        '($text)',
        style: TextStyle(
          color: const Color(0xFF00FFFF),
          fontSize: 12.sp,
          decoration: TextDecoration.underline,
        ),
      ),
    );
  }
}
